<template>
  <div class="table-footer-container">
    <div class="table-footer">
      <div class="list-info">
        <i18n path="common.base.table.totalCount">
          <span place="count" class="level-padding">{{page.total}}</span>
        </i18n>
        <template v-if="multipleSelection&&multipleSelection.list&&multipleSelection.list.length>0">
          <i18n path="common.base.table.selectedNth">
            <span place="count" class="product-selected-count" @click="multipleSelection.multipleSelectionPanelShow = true">{{multipleSelection.list.length}}</span>
          </i18n>
          <span class="product-selected-count" @click="toggleSelection()">{{$t('common.base.clear')}}</span>
        </template>
      </div>
      <el-pagination
        class="product-table-pagination"
        background
        @current-change="jump"
        @size-change="handleSizeChange"
        :page-sizes="defaultTableData.defaultPageSizes"
        :page-size="searchModel.pageSize"
        :current-page="searchModel.pageNum"
        layout="prev, pager, next, sizes, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <base-panel class="product-panel" :show.sync="multipleSelection.multipleSelectionPanelShow" width="420px">
      <h3 slot="title">
        <span>{{$t('common.base.exportModal.selectedData', {count: multipleSelection.list.length})}}</span>
        <i
          v-if="multipleSelection.list.length"
          class="iconfont icon-qingkongshanchu product-panel-btn"
          @click="toggleSelection()"
          :title="$t('common.base.tip.clearChoseDataTip')" data-placement="right" v-tooltip></i>
      </h3>

      <div class="product-selected-panel">
        <div class="product-selected-tip" v-if="!multipleSelection.list.length">
          <img :src="nodataImage">
          <p>{{$t('common.base.tip.noSelectedDataFromList')}}</p>
        </div>
        <template v-else>
          <div class="product-selected-list">
            <div class="product-selected-row product-selected-head">
              <span class="product-selected-sn">{{multipleSelection.leftName}}</span>
              <span class="product-selected-name">{{multipleSelection.rightName}}</span>
            </div>
            <div class="product-selected-row" v-for="c in multipleSelection.list" :key="c.id" >
              <span class="product-selected-sn">{{c.serialNumber}}</span>
              <span class="product-selected-name">{{c.name}}</span>
              <button type="button" class="product-selected-delete" @click="removeFromSelection(c)">
                <i class="iconfont icon-fe-close"></i>
              </button>
            </div>
          </div>
        </template>
      </div>
    </base-panel>
  </div>
</template>

<script>

import { getOssUrl } from '@src/util/assets'
import { defaultTableData } from '@src/util/table'
const nodataImage = getOssUrl('/no_data.png')
export default {
  name: 'table-footer',
  props: {
    page: {
      type: Object,
      default: () => ({})
    },
    multipleSelection: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
      defaultTableData,
      nodataImage,
      searchModel: {
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
      }
    }
  },
  methods: {
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.$emit('search', this.searchModel, 'jump');
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;
      this.$emit('search', this.searchModel, 'pageSizeChange')
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$emit('toggleRowSelection', row);
        });
      } else {
        this.$emit('clearSelection');
        this.multipleSelection.list = [];
      }
    },
    removeFromSelection (c) {
      if(!c || !c.id) return 

      this.multipleSelection.list = this.multipleSelection.list
        .filter(ms => ms.id !== c.id);
      this.multipleSelection.list.length < 1 ? this.toggleSelection() : this.toggleSelection([c]);
    }
  }
}
</script>

<style lang="scss">
.table-footer-container .product-panel {
  .base-panel-title {
    h3 {
      display: flex;
      justify-content: space-between;
    }
    .product-panel-btn {
      cursor: pointer;
      &:hover {
        @include fontColor();
      }
    }
  }
}
.table-footer-container .table-footer {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 10px 10px ;
  background: #fff;
  border-radius: 0 0 3px 3px;

  .list-info {
    font-size: 13px;
    line-height: 32px;
    margin: 0;
    color: #767e89;

    .iconfont {
      position: relative;
      top: 1px;
    }

    .product-selected-count{
      @include fontColor();
      padding: 0 3px;
      width: 15px;
      text-align: center;
      cursor: pointer;
      font-size: 13px;
    }

  }

  .el-pagination__jump {
    margin-left: 0;
  }
}
.product-selected-panel {
  font-size: 14px;
  height: calc(100% - 51px);

  .product-selected-tip {
    padding-top: 80px;

    img {
      display: block;
      width: 160px;
      margin: 0 auto;
    }

    p {
      text-align: center;
      color: $text-color-regular;
      margin: 8px 0 0 0;
      line-height: 20px;
    }
  }

  .product-selected-list {
    height: 100%;
    padding: 10px;
    overflow-y: auto;

    .product-selected-row {
      display: flex;
      flex-flow: row nowrap;
      line-height: 36px;
      border-bottom: 1px solid #ebeef5;
      font-size: 13px;

      &:hover {
        background-color: #f5f7fa;

        .product-selected-delete {
          visibility: visible;
        }
      }
    }

    .product-selected-head {
      background-color: #F0F5F5;
      color: #333;
      font-size: 14px;
    }

    .product-selected-sn {
      padding-left: 10px;
      width: 150px;
      @include text-ellipsis;
    }

    .product-selected-name {
      padding-left: 10px;
      flex: 1;
      @include text-ellipsis;
    }

    .product-selected-delete {
      width: 36px;
    }

    .product-selected-row button.product-selected-delete {
      padding: 0;
      width: 36px;
      height: 36px;
      border: none;
      background-color: transparent;
      outline: none;
      color: #646B78;
      visibility: hidden;

      i {
        font-size: 14px;
      }

      &:hover {
        color: #e84040;
      }
    }
  }
}
</style>
